<template>
  <div>
    <van-nav-bar
        fixed
        class="train-nav-bg"
        :title="$t('train.t1')"
    />
    <van-form ref="form" @submit="onSubmit" style="margin: 60px 0;">
      <van-cell-group inset>
        <van-field
            v-model="dbName"
            name="dbName"
            :label="$t('train.t2')"
            :placeholder="$t('train.t2')"
            :rules="[{ required: true, message: $t('train.t3') }]"
            @blur="setSession"
            is-link
            readonly
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              :default-index="defaultIndex"
              @confirm="onConfirm"
          />
        </van-popup>
        <van-field
            v-model="method"
            name="method"
            :label="$t('train.t4')"
            :placeholder="$t('train.t4')"
            :rules="[{ required: true, message: $t('train.t5') }]"
            @blur="setSession"
        />
        <van-field name="direction" :label="$t('train.t6')" :rules="[{ required: true, message: $t('train.t7') }]">
          <template #input>
            <van-radio-group v-model="direction" direction="horizontal" @change="setSession">
              <van-radio name="1">{{ $t('train.t8') }}</van-radio>
              <van-radio name="2">{{ $t('train.t9') }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-model="input"
            name="input"
            rows="2"
            autosize
            :label="$t('train.t10')"
            type="textarea"
            :placeholder="$t('train.t10')"
            :rules="[{ required: true, message: $t('train.t11') }]"
            show-word-limit
            @blur="setSession"
        />
        <van-field
            v-model="output"
            name="output"
            rows="2"
            autosize
            :label="$t('train.t12')"
            type="textarea"
            :placeholder="$t('train.t12')"
            :rules="[{ required: true, message: $t('train.t13') }]"
            show-word-limit
            @blur="setSession"
        />
      </van-cell-group>
      <div style="margin: 16px;display: flex">
        <van-button class="train-btn" native-type="submit">
          {{ $t('train.t14') }}
        </van-button>
        <van-button class="train-btn1" native-type="button" @click="onPunishment">
          {{ $t('train.t15') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {Form, Field, CellGroup, Button, NavBar, Radio, RadioGroup, Picker, Popup} from 'vant';
import {punishment, reward} from "../../api/sensor";
import {getSessionItem, setSessionItem} from "../../utils/storage";
import {listDatabase} from "../../api/database";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup
  },

  data () {
    return {
      dbName: '',
      method: '',
      direction: '1',
      input: '',
      output: '',
      showPicker: false,
      defaultIndex: 0,
      columns: [],
    }
  },

  created: function () {
    this.getDatabase()
    if (getSessionItem('trainData')) {
      const { dbName, method, direction, input, output, defaultIndex} = JSON.parse(getSessionItem('trainData'))
      this.dbName = dbName
      this.method = method
      this.direction = direction
      this.input = input
      this.output = output
      this.defaultIndex = defaultIndex
    }
  },

  methods: {
    getDatabase() {
      let self = this
      const params = {
        page: 1,
        size: 1000
      }
      listDatabase(self, params).then(response => {
        console.log(response.data)
        this.columns = response.data.rows.map(({ dbName }) => dbName) || []
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onConfirm (value, index) {
      console.log(value, index)
      this.showPicker = false;
      this.defaultIndex = index
      this.dbName= value;
      this.setSession()
    },

    setSession () {
      const trainData = {
        dbName: this.dbName,
        method: this.method,
        direction: this.direction,
        input: this.input,
        output: this.output,
        defaultIndex: this.defaultIndex
      }
      setSessionItem('trainData', JSON.stringify(trainData))
    },

    onSubmit(values) {
      let self = this
      const params = {
        ...values,
        direction: values.direction === '1' ? true : false
      }
      reward(self, params).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onPunishment () {
      let self = this
      this.$refs.form
          .validate(['dbName', 'method', 'direction', 'input', 'output'])
          .then(() => {
            const params = {
              dbName: this.dbName,
              method: this.method,
              input: this.input,
              output: this.output,
              direction: this.direction === '1' ? true : false
            }
            punishment(self, params).then(response => {
              console.log(response.data)
            }).catch(function (error) {
              // console.log(error)
              return error
            })
          })
    }
  }
};
</script>

<style lang="less">
.train {
  &-nav-bg {
    margin-bottom: 15px;
    //background: #4293F4;
    box-shadow: 0 0 25px #cac6c6;
  }

  &-btn {
    width: 50%;
    color: #fff;
    background-color: #4293F4;
    border: 1px solid #4293F4;
  }

  &-btn1 {
    width: 50%;
    color: #000;
    background-color: #fff;
    //border: 1px solid #4293F4;
  }
}
</style>
